<%@ page language="java" contentType="text/html;" pageEncoding="UTF-8"%>
<%@ include file="/views/global/taglibs.jsp" %>
<!DOCTYPE html>
<html>
<head>
<base href="<%=basePath %>">

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<%@include file="/views/global/ShopInclude.jsp" %>
<link href="static/css/page/submitPersonalInfo.css" rel="stylesheet" type="text/css">

<title>submitPersonalInfo</title>
</head>
<body class="submitBg">
<!-- 顶部导航条  -->
<%@include file="/views/global/header.jsp" %>
<c:set var="pageName" value="personLifeEdit"></c:set>
<%@include file="/views/global/SellerHeader.jsp" %>
  
  <div class="submitFormContainer center font fontColorGray">  <!-- 表单填写部分 -->
    <hr class="hrBorder">
      <table class="hrTableBorder" style="margin: 40px 0 0 85px;">
        <tr class="uploadPersonalPhotoLine">
          <td class="formLabel left">UPLOAD PHOTOS:</td>
          <td>
            <div class="addPersonalImageArea left">
              <form id="imageForm" method="post" enctype="multipart/form-data">
               <input id="addPersonalImageFile" name="addPersonalImage" class="addPersonalImage" type="file" accept="img/*"/>
              </form>
              <img class="addPersonalImageIcon" src="static/images/page/submitCommodity/photoAddIcon.png"/>
            </div>
            <ul id="personalImagesAdded" class="personalImagesAdded right">
	            <c:forEach var="itemImage" items="${personLifeFiles }" varStatus="pc">
	                <c:choose>
	                   <c:when test="${pc.count eq 6 }">
	                      <li class="addedPersonalImage${pc }">
	                          <img src="${fileServerBasePath }download/${itemImage }" imageId="${itemImage }"  index="${pc.count }" blank="false"/>
	                          <div class="imgDeleteIcon" onclick="deleteImage(this,'${pc.count }')"></div>
	                      </li>
	                   </c:when>
	                   <c:otherwise>
	                       <li class="addedPersonalImage${pc } addedImageSpacingRight">
	                          <img src="${fileServerBasePath }download/${itemImage }"  imageId="${itemImage }" index="${pc.count }" blank="false"/>
	                          <div class="imgDeleteIcon" onclick="deleteImage(this,'${pc.count }')"></div>
	                       </li>
	                   </c:otherwise>
	                </c:choose>
	                
	            </c:forEach>
	            
	            <c:forEach var="index" begin="1" end="${6-fn:length(personLifeFiles) }" >
	                 <c:choose>
	                   <c:when test="${index eq 6 }">
	                      <li class="addedPersonalImage${index }">
	                          <img src="static/images/module/image_upload/imageAddBlank.png" imageId="0"  index="${index }" blank="true"/>
	                      </li>
	                   </c:when>
	                   <c:otherwise>
	                       <li class="addedPersonalImage${index } addedImageSpacingRight">
	                          <img src="static/images/module/image_upload/imageAddBlank.png"  index="${index }" blank="true"/>
	                       </li>
	                   </c:otherwise>
	                </c:choose>
	            </c:forEach>
            </ul>
          </td>
        </tr>
        <tr><td>&nbsp;</td></tr>
      </table>
      <form id="submitForm" action="">
      </form>
      <div class="form-group row">
	    	<div class="col-xs-2">
	    		<button type="button" id="btnExit" class="btn btn-default" style="border-radius: 0;width: 100px; height: 40px; color: #fff; background: #b5b6b3; margin: 50px 0 80px 250px;">EXIT</button>
	    	</div>
	    	<div class="col-xs-8">
	    		<div id="msg"></div>
	    	</div>
	    	<div class="col-xs-2">
	    		<button type="button" id="btnSave" class="btn btn-default pull-right" style="border-radius: 0;width: 100px; height: 40px; color: #fff; background: #47caf4; margin: 50px 250px 80px 0;">SAVED</button>
	    	</div>
	   </div>
  </div>
  <div class="clearfix"></div>
<!-- 页尾 -->
<%@include file="/views/global/AdminScripts.jsp" %>
<%@include file="/views/global/footer.jsp" %>

<!-- 页尾结束 -->
</body>
	<script type="text/javascript" src="static/javascript/jqueryUI/ui/jquery-ui.min.js"></script>
	<script type="text/javascript" src="static/javascript/module/generic.js"></script>
	<script type="text/javascript">
	var personImageArray = new Array();
	$(document).ready(function(){
		personImageArray.length = 0;
		
		$("#personalImagesAdded").find("IMG[blank='false']").each(function(i, obj){
			personImageArray.push({id: $(obj).attr("imageId"), src: $(obj).attr("src")});
		});
		
		$("#addPersonalImageFile").on("change", function(){
			if(personImageArray.length>=6){
				art.dialog({title:"ERROR", icon: "error", content: "UPLOAD lIMIT EOOR,MAX IMAGES IS 6,REMOVE SOMEONE "});
			}else{
				var target = this;
				if("" != $.trim($(target).val())){
					$("#imageForm").goAjax({
						url:"/upload",
						semantic:false,
						data:{},
						success: function(jsonData) {
							if("SUCCESS" == jsonData.state){
								var imgObj = $(".personalImagesAdded").find("IMG[blank='true']").eq(0);
								$(imgObj).attr("src", jsonData.url);
								$(imgObj).attr("blank", 'false');
								$(imgObj).attr("imageId", jsonData.fileId);
								$(imgObj).after('<div class="imgDeleteIcon" onclick="deleteImage(this,'+$(imgObj).attr("index")+')"></div>');
								personImageArray.push({id: 0, src: jsonData.url});
							}
							$(target).val("");
						}
					});
				}
			}
			
		});
		
		$("#btnExit").click(function(){
			window.location.reload();
		});	
		$("#btnSave").click(function(){
			var imageArray = new Array();
			$("#personalImagesAdded").find("IMG[blank='false']").each(function(i, obj){
				imageArray.push($(obj).attr("imageId"));
			});
			$("#submitForm").goAjax({
				url:"seller/personLife/save",
				semantic:false,
				data:{lifeFileIds: imageArray.join(",")},
				success: function(jsonData) {
					if(true == jsonData.success){
						window.location.reload();
					} else {
						art.dialog({title:"ERROR", icon: "error", content: "UPLOAD FAILURE! "});
					}
				}
			});
		});
	});

	function deleteImage(target, pos){
		personImageArray.splice(pos-1, 1);
		var imgObj = $(target).prev();
		$(imgObj).attr("blank", 'true');
		$(imgObj).attr("imageId", 0);
		$(imgObj).attr("src", "static/images/module/image_upload/imageAddBlank.png");
		$(target).remove();
	}
</script>
</html>